import WebVideoCreator, { VIDEO_ENCODER, logger } from "./index.js";

class WeddingVideoGenerator {
    constructor() {
        this.wvc = new WebVideoCreator();
        this.setupHighQuality();
    }

    setupHighQuality() {
        this.wvc.config({
            frameFormat: "png",        // 无损PNG格式
            frameQuality: 95,          // 95%质量
            browserUseGPU: true,       // GPU加速
            mp4Encoder: VIDEO_ENCODER.CPU.H264,
            debug: false               // 关闭调试，提高性能
        });
    }

    // 生成婚礼视频
    async generateWeddingVideo(data) {
        const htmlContent = this.createWeddingTemplate(data);
        
        const video = this.wvc.createSingleVideo({
            content: htmlContent,
            
            // 高清设置
            width: 1920,             // 1080p宽度
            height: 1080,            // 1080p高度
            fps: 30,                 // 30fps (稳定性更好)
            duration: data.duration || 15000, // 15秒默认
            
            // 质量设置
            videoQuality: 95,        // 95%质量
            pixelFormat: "yuv420p",  // 兼容性好
            audioBitrate: "192k",    // 高质量音频
            
            outputPath: `./output/${data.orderId || 'wedding'}_video.mp4`,
            showProgress: true
        });

        // 添加背景音乐
        if (data.bgMusic) {
            video.addAudio({
                path: data.bgMusic,
                loop: true,
                volume: 70
            });
        }

        logger.info(`🎬 开始生成婚礼视频: ${data.brideName} ❤️ ${data.groomName}`);
        
        return new Promise((resolve, reject) => {
            video.once("completed", (result) => {
                logger.success(`✅ 婚礼视频生成完成！
👰 新娘: ${data.brideName}
🤵 新郎: ${data.groomName}
📹 分辨率: 1920x1080
⏱️  耗时: ${Math.floor(result.takes / 1000)}秒
📁 文件: ${result.outputPath}`);
                resolve(result);
            });
            
            video.once("error", (error) => {
                logger.error(`❌ 生成失败: ${error.message}`);
                reject(error);
            });
            
            video.start();
        });
    }

    // 创建婚礼模板HTML
    createWeddingTemplate(data) {
        return `
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>婚礼视频</title>
            <style>
                body { 
                    margin: 0; 
                    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
                    font-family: 'Arial', sans-serif;
                    overflow: hidden;
                }
                .container { 
                    width: 100vw; 
                    height: 100vh; 
                    position: relative; 
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .content {
                    text-align: center;
                    z-index: 10;
                }
                .bride-photo, .groom-photo { 
                    width: 300px; 
                    height: 400px;
                    border-radius: 20px;
                    position: absolute;
                    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
                    border: 5px solid white;
                }
                .bride-photo {
                    left: 200px;
                    top: 50%;
                    transform: translateY(-50%);
                    animation: slideInLeft 3s ease-out;
                }
                .groom-photo {
                    right: 200px;
                    top: 50%;
                    transform: translateY(-50%);
                    animation: slideInRight 3s ease-out;
                }
                .names {
                    color: white;
                    text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
                    animation: fadeInUp 4s ease-out;
                }
                .names h1 {
                    font-size: 64px;
                    margin: 20px 0;
                    font-weight: bold;
                }
                .names .date {
                    font-size: 32px;
                    margin-top: 20px;
                    opacity: 0.9;
                }
                .heart {
                    font-size: 80px;
                    color: #ff6b6b;
                    animation: heartbeat 2s ease-in-out infinite;
                    margin: 0 20px;
                }
                .particles {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }
                .particle {
                    position: absolute;
                    background: rgba(255,255,255,0.8);
                    border-radius: 50%;
                    animation: float 6s ease-in-out infinite;
                }
                .particle:nth-child(1) { left: 10%; animation-delay: 0s; width: 10px; height: 10px; }
                .particle:nth-child(2) { left: 20%; animation-delay: 1s; width: 15px; height: 15px; }
                .particle:nth-child(3) { left: 30%; animation-delay: 2s; width: 8px; height: 8px; }
                .particle:nth-child(4) { left: 40%; animation-delay: 0.5s; width: 12px; height: 12px; }
                .particle:nth-child(5) { left: 50%; animation-delay: 1.5s; width: 18px; height: 18px; }
                .particle:nth-child(6) { left: 60%; animation-delay: 2.5s; width: 6px; height: 6px; }
                .particle:nth-child(7) { left: 70%; animation-delay: 3s; width: 14px; height: 14px; }
                .particle:nth-child(8) { left: 80%; animation-delay: 0.8s; width: 11px; height: 11px; }
                .particle:nth-child(9) { left: 90%; animation-delay: 1.8s; width: 16px; height: 16px; }

                @keyframes slideInLeft {
                    0% { left: -400px; opacity: 0; transform: translateY(-50%) rotate(-10deg); }
                    100% { left: 200px; opacity: 1; transform: translateY(-50%) rotate(0deg); }
                }
                @keyframes slideInRight {
                    0% { right: -400px; opacity: 0; transform: translateY(-50%) rotate(10deg); }
                    100% { right: 200px; opacity: 1; transform: translateY(-50%) rotate(0deg); }
                }
                @keyframes fadeInUp {
                    0% { opacity: 0; transform: translateY(50px) scale(0.8); }
                    100% { opacity: 1; transform: translateY(0) scale(1); }
                }
                @keyframes heartbeat {
                    0%, 100% { transform: scale(1); }
                    50% { transform: scale(1.2); }
                }
                @keyframes float {
                    0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
                    10%, 90% { opacity: 1; }
                    50% { transform: translateY(-10px) rotate(180deg); }
                }
            </style>
        </head>
        <body>
            <div class="particles">
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
            </div>
            <div class="container">
                <img src="${data.bridePhoto}" class="bride-photo" alt="新娘照片">
                <img src="${data.groomPhoto}" class="groom-photo" alt="新郎照片">
                <div class="content">
                    <div class="names">
                        <h1>${data.brideName}<span class="heart">💕</span>${data.groomName}</h1>
                        <div class="date">${data.weddingDate}</div>
                    </div>
                </div>
            </div>
            ${data.bgMusic ? `<audio src="${data.bgMusic}" loop autoplay></audio>` : ''}
        </body>
        </html>
        `;
    }

    // 批量生成
    async generateBatch(dataList) {
        const results = [];
        
        for (const data of dataList) {
            try {
                const result = await this.generateWeddingVideo(data);
                results.push({ success: true, data, result });
            } catch (error) {
                results.push({ success: false, data, error: error.message });
            }
        }
        
        return results;
    }
}

// 使用示例
async function demo() {
    const generator = new WeddingVideoGenerator();
    
    // 单个视频生成
    const weddingData = {
        orderId: "W001",
        brideName: "小美",
        groomName: "小明", 
        weddingDate: "2024年12月25日",
        bridePhoto: "https://via.placeholder.com/300x400/ff9a9e/ffffff?text=新娘",
        groomPhoto: "https://via.placeholder.com/300x400/4ecdc4/ffffff?text=新郎",
        duration: 15000 // 15秒
    };
    
    try {
        const result = await generator.generateWeddingVideo(weddingData);
        logger.success("🎉 婚礼视频生成成功！");
    } catch (error) {
        logger.error("生成失败:", error);
    }
}

// 运行演示
demo();

export default WeddingVideoGenerator;